<!DOCTYPE html>
<meta charset="utf-8">

<svg height="100" width="100" viewBox="40 40 20 20">
  <polyline stroke-width="10%" stroke="gold" points="20,20 80,80"></polyline>
</svg>
<svg height="100" width="100" viewBox="40 40 20 20">
  <polyline stroke-width="calc(5% + 5px)" stroke="gold" points="20,20 80,80"></polyline>
</svg>
<svg height="100" width="100" viewBox="40 40 20 20">
  <circle stroke-width="10%" stroke="gold" cx="50" cy="50" r="10" fill="none"></circle>
</svg>
<svg height="100" width="100" viewBox="40 40 20 20">
  <rect stroke-width="10%" stroke="gold" x="40" y="40" width="20" height="10" fill="none"></rect>
</svg>
